<template>
  <div>
<!--    权限用名称而不用数字-->
    <h3 class="title">角色管理</h3>
    <div style="overflow: hidden">

<!--      <el-input v-model="inputValue" placeholder="请输入角色名" clearable style="width: 200px;"></el-input>-->
<!--      <el-button type="primary" class="el-icon-search" size="small" style="margin-left: 10px">查询</el-button>-->
<!--      <el-button type="primary" style="" @click="roleAdd" class="el-icon-circle-plus-outline">角色新增</el-button>-->
<!--    <el-button type="primary" style="margin-left: 10px;float:right;" @click="exportWord" class="el-icon-download">导出</el-button>-->
      </div>
  <el-table
      class="InfoData"
      :data="tableData.roleData"
      :header-cell-style="this.$handleheader"
      :row-style="this.$rowstyle"
      :cell-style="this.$cellstyle"
      border
  >
    <el-table-column
        prop="role_name"
        label="角色名称"
        header-align="center"
        width="200"
    />
    <el-table-column
        prop="function"
        label="权限"
        header-align="center"
    >
    </el-table-column>
<!--    <el-table-column-->
<!--        label="操作"-->
<!--        width="200"-->
<!--        align='center'-->
<!--        header-align="center"-->
<!--    >-->
<!--      <template slot-scope="scope">-->
<!--        <el-button type="text" @click="edit(scope.row)">修改</el-button>-->
<!--        <el-button type="text" @click="del">删除</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :show-close=false
        :before-close="handleClose">
      <el-form ref="roleForm" :rules="rules" :model="roleForm" label-width="100px">
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="roleForm.role_name"></el-input>
        </el-form-item>
      </el-form>
      <el-transfer v-model="value3" :data="data" :titles="['未授予的权限', '已授予的权限']" style="margin-top: 20px"></el-transfer>

    <el-button @click="dialogVisible = false" style="margin-top: 10px">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false" style="margin-top: 10px">确 定</el-button>
    </el-dialog>
<!--    <div id="testContainer" style="height: 300px;width: 95%;float: left;margin-top: 20px;margin-left: 10px"></div>-->

  </div>
</template>

<script>
import JSZipUtils from "jszip-utils"
import docxtemplater from "docxtemplater"
import { saveAs } from 'file-saver'
import PizZip from 'pizzip';
import {toDataURL} from '@/components/exportFunction'
import {roleList} from "@/api/user";
export default {
  name: "roleManager",
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    }
    return {
      data: generateData(),
      tableData: {
        imgUrl:'',
        roleData:null
      },
      dialogVisible:false,
      value3 :[1, 4],
      line: null,
      chartInstance:null,
      inputValue:'',
      roleForm:{
        role_name:''
      },
      rules:{
        role_name: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
        ],
      }
    }
  },
  mounted() {
    // this.initTestChart()
  },
  created() {
    roleList().then(res=>{
    // axios.get(this.$ip2 + '/user/role/all/').then(res=>{
      this.tableData.roleData = res.data
      for (let i = 0; i < res.data.length; i ++) {
        this.tableData.roleData[i].function = this.tableData.roleData[i].function + '.'
      }

    })
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    roleAdd() {
      this.dialogVisible = true
      this.roleForm.role_name =''
    },
    edit(row) {
      console.log(row.role_name);
      this.dialogVisible = true
      this.roleForm.role_name = JSON.parse(JSON.stringify(row.role_name))
    },
    // 获取Echart图表的base
    getImg() {
      console.log('src', toDataURL(this.line.chart))
      // var img = new Image();
      // img.src = this.chartInstance.getDataURL({
      //   pixelRatio: 2,
      //   backgroundColor: '#fff',
      //   type: 'png'
      // })
      this.tableData.imgUrl = toDataURL(this.line.chart)
      // this.tableData.imgUrl = img.src
      // console.log('src', toDataURL(this.line.chart))
    },
    // Echarts图片处理
    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },
    //导出为word
    exportWord() {
      this.getImg();
      //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      const ImageModule = require('docxtemplater-image-module-free');
      const _this = this;
      //Word路径，在public文件下(CLI3)
      JSZipUtils.getBinaryContent("test2.docx", function (error, content) {
        if (error) {
          throw error
        }
        let opts = {}
        opts.centered = true;
        opts.fileType = "docx";
        opts.getImage = (tag) => {
          return _this.base64DataURLToArrayBuffer(tag);
        }
        opts.getSize = () => {
          return [1000, 450]//这里可更改输出的图片宽和高
        }
        let zip = new PizZip(content);
        let doc = new docxtemplater();
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);
        // 这里是设置导出的数据
        doc.setData({
          tableData:_this.tableData, //基础信息
          roleData: _this.tableData.roleData
          // arr: _this.arr // 评语
        })
        try {
          doc.render()
        } catch (error) {
          var e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          console.log(JSON.stringify({
            error: e
          }));
          throw error;
        }
        const out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        })
        saveAs(out, "报告.docx")
      })
    },


  }
}
</script>

<style scoped>
</style>
